<template>
	<view class="ChangePassword">
		<view class="phone">
			当前手机号:
			<input type="text" v-model="phone" disabled />
		</view>
		<view class="list">
			<view class="item">
				<input maxlength="6" type="password" placeholder="设置6位字符密码,仅支持数字" v-model="password" />
			</view>
			<view class="item">
				<input maxlength="6" type="password" placeholder="再次输入密码" v-model="password2" />
			</view>
			<view class="item acea-row row-between-wrapper">
				<input type="number" placeholder="填写验证码" class="codeIput" v-model="captcha" />
				<button class="code font-color-red" :disabled="disabled" :class="disabled === true ? 'on' : ''"
					@click="code">{{ text }}</button>
			</view>
		</view>
		<view class="confirmBnt bg-color-black" @click="confirm" v-if="type == 2">确认重置</view>
		<view class="confirmBnt bg-color-black" @click="confirm" v-else>确认修改</view>
	</view>
</template>

<script>
	// import { mapGetters } from "vuex";
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import attrs, {
		required,
		alpha_num,
		chs_phone
	} from "@/utils/validate";
	import {
		validatorDefaultCatch
	} from "@/utils/dialog";
	import {
		registerReset,
		registerVerify,
		getUserInfo,
		setupPwd
	} from "@/api/user";

	export default {
		name: "ChangePassword",
		components: {},
		props: {},
		data: function() {
			return {
				password: "",
				password2: "",
				captcha: "",
				type:'',
				phone: "", //隐藏几位数的手机号；
				yphone: "" //手机号；
			};
		},
		mixins: [sendVerifyCode],
		// computed: mapGetters(["userInfo"]),
		mounted: function() {
			this.getUserInfo();
			
		},
		onShow: function() {
			this.type = this._route.query.id;
			if(this.type == 2){
				uni.setNavigationBarTitle({
				    title: '重置密码'
				});
			}
		},
		methods: {
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.yphone = res.data.phone;
					let reg = /^(\d{3})\d*(\d{4})$/;
					that.phone = that.yphone.replace(reg, "$1****$2");
				});
			},
			
			async confirm() {
				let that = this;
				let patrn = /^[0-9]*$/;

				const {
					password,
					password2,
					captcha
				} = that;
				try {
					await that
						.$validator({
							password: [
								required(required.message("密码")),
								// attrs.range(6, attrs.range.message("密码")),
								alpha_num(alpha_num.message("密码"))
							],
							captcha: [
								required(required.message("验证码")),
								alpha_num(alpha_num.message("验证码"))
							]
						})
						.validate({
							password,
							captcha
						});
				} catch (e) {
					return validatorDefaultCatch(e);
				}
				if (that.password.length < 6) {
					uni.showToast({
						title: '支付密码最小长度不能小于6位',
						icon: "none",
						duration: 2000
					});
					return
				} else {
					if (!patrn.test(that.password)) {
						uni.showToast({
							title: '支付密码必须为6位纯数字密码',
							icon: "none",
							duration: 2000
						});
						return
					}
				}
				if (password !== password2) return uni.showToast({
					title: '两次密码不一致',
					icon: "none",
					duration: 2000
				});



				setupPwd(that.captcha, that.password).then(res => {
						uni.showToast({
							title: "设置成功",
							icon: "success",
							duration: 2000
						});
						setTimeout(function() {
							that.BackPage()
						}, 2000);

					})
					.catch(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
					});
			},
			async code() {
				let that = this;
				const {
					yphone
				} = that;
				try {
					await that
						.$validator({
							yphone: [
								required(required.message("手机号码")),
								chs_phone(chs_phone.message())
							]
						})
						.validate({
							yphone
						});
				} catch (e) {
					return validatorDefaultCatch(e);
				}

				registerVerify({
						phone: yphone
					})
					.then(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
						that.sendCode();
					})
					.catch(res => {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						});
					});
			},
			BackPage() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: '/pages/home/index'
					})
				}
				return;
				// #endif
				uni.navigateBack(1)
			}
		}
	};
</script>
<style lang="less">

	.ChangePassword .phone input {
		width: 3*100rpx;
		text-align: left;
		/* #ifdef H5 */
		padding-top: 20rpx;
		padding-left: 8rpx;
		/* #endif */
		
	}

	.ChangePassword .phone {
		padding-left: 75rpx;
		text-align: left;
		/* #ifdef H5 */
		font-size: 40rpx;
		/* #endif */
		
	}

	.ChangePassword .list {
		width: 610rpx;
	}

	page {
		height: auto;
		background-color: #FFFFFF;
	}
</style>
